<template>
  <div class="my-header"  :style="{backgroundColor:background,color:color,}">{{title}}</div>
</template>
//目标让header组件支持不同的项目 自定义
<script>
// 可以对props里的变量值进行校验  
export default {
  // props  对某些传参数得约束都是固定的
props:{
background:String,//外部传入此变量的值 必须是字符串类型 否则会报错
color:{
  type:String,//约束color值的类型  
  default:'#fff'//color变量默认值，外部不给传值 就是用默认值
},
title:{
  type:String,
  required:true//必须传入此变量值 
}
}
}
</script>

<style lang="less" scoped>
  .my-header {
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #1d7bff;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
</style>